<!-- 静态面板 -->
<template>
    <widget-view-vessel
        v-model="widgetList"
        :widget-data="element"
        :disabled="draggableDisabled"
        :custom-class="['static-vessel']"
        :custom-style="boxStyle"
        :preview="preview"
        placeholder="拖拽组件到静态面板"
        disabled-placeholder="不可放置"
    />
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import useWidgetDraggable from '@/libs/edit/widgetDraggable'
import whiteList from './white-list'
import WidgetViewVessel from '../../widget-view-vessel'
export default defineComponent({
    name: 'WidgetStaticVessel',
    components: {
        WidgetViewVessel
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        },
        // 预览模式
        preview: {
            type: Boolean,
            default: false
        }
    },
    setup(props, { emit }) {
        const { element, preview } = toRefs(props)

        const {
            draggableWidgetType
        } = useWidgetDraggable()

        const widgetList = computed({
            get: () => element.value?.eles?.content || [],
            set: val => {
                element.value.eles.content = val
            }
        })

        const draggableDisabled = computed(() => {
            return !!draggableWidgetType.value && !whiteList.includes(draggableWidgetType.value)
        })

        const boxStyle = computed(() => {
            const style = element.value.eles.style || {}
            return {
                width: style.width,
                opacity: style.opacity,
                marginTop: style['margin-top'],
                marginLeft: style['margin-left'],
                marginRight: style['margin-right'],
                backgroundColor: style['background-color'],
                backgroundImage: style['background-image'],
                borderStyle: style['border-style'],
                borderColor: style['border-color'],
                borderWidth: style['border-width'],
                borderRadius: style['border-radius'],
                boxShadow: style['box-shadow']
            }
        })

        return {
            element,
            preview,

            draggableDisabled,
            widgetList,
            boxStyle
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-static-vessel.less';
</style>